/*
    任何 子路由 都是在其 父路由 的组件中 切换 显示，
    不管是多少层的路由嵌套，都是这样的理解，
    所以父路由需要有以下两点，二者缺一不可
    1 有组件引用
    2 组件中有router-view组件

    App.vue 是所有组件的父组件，
    一级路由相当于 App 的子路由
    所有一级路由在App.vue中切换显示
    App.vue 中的 router-view  对应 routes 中 一级路由 位置
    /   默认显示    其他切换 显示

    Layout.vue 是二级路由的父组件，
    所有  二级路  在 Layout.vue中切换显示
    Layout.vue 中的 router-view  对应 routes--Layout 中 children路由 位置
    /   默认显示    其他切换 显示

    传递参数
    name 方式 需要 添加  name配置项
    query传参 三种写法
    路由中  需要 去掉 /:id  否则会报错  path:'/home',
    <router-link :to="{name:'home',query:{id:1}}" />

    第一种：this.$router.push({name:'home',query:{id:1,age:2}})
    第二种：this.$router.push({path:'/home',query:{id:1,age:2}})
    第三种：this.$router.push(`/home?id=1`);
    取参 this.$route.query.id
    query类似 get，跳转之后页面url后面会拼接参数，类似?id=1，

    params只能和name一起用哟  路由中 需要配置 name
    路由中  需要 加上 /:id
    1 this.$router.push({name:'home',params:{id:1,age:2}})
    2 this.$router.push(`/home/id=1`);
    //路由配置：
       {
	       path:'/home/:id/:age',
         name:'home',
	       component:W
       }
     取参 this.$route.params.id
    params类似post，跳转之后页面url后面不会拼接参数


    const router = createRouter({
  // 使用哈希路由模式
  history: createWebHashHistory(),
  // 路由配置
  routes,
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
     // vue2  x  y
    // 始终滚动到顶部
    return { top: 0 }
  }
})


使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，
尤其是在history模式下


useRouter() undefined
useRouter执行一定要放在setup方法内的顶部或者其他位置，
不能放在下面setup的函数里面执行，
否则作用域改变useRouter执行是undefined

vue 子路由  路径写/和不写/的差别
子路由写/的时候代表是绝对路径 跳转的时候直接在 跟路径 下跟上子路由
不写/的时候 会进行拼接 在原有路径上跟上新的path路径

因此  子路由  默认路由可以 写 '' 默认拼接 父路由  跟 '/father' 同理
父  '/'              '/father'
子  '/' ''           '/father'  ''
                 '/father/callback'  'callback'

链接激活时使用的 CSS 类名

根据当前路由 来匹配 是否 active
exact-active-class="active"精准匹配
路由是 /member  只有 /member 的 a 标签才可以 有active class
也可以 less 中 .router-link-exact-active{}

active-class="active"  当前路由开头即可--激活自身 和 上一级
路由是 /member   /member开头的  的 a 标签才都可以 有active class
比如 当前路由是 /member  /(上一级)  也会  /member/xxx  不会
也可以 less 中 .router-link-active{}

如果比较多  可以在 router--index 中  配置   统一修改
linkActiveClass       :   'active'
linkExactActiveClass  :   'active'

重点 ***********************************
active-class  模糊匹配 可以匹配自身路由规则 以及其上一级
/member   /member  /  都可以    vue2中
vue3 中   要求 路由也必须是 嵌套关系 才可以
/member/order
/member/order/123
可以写平级关系 to 跳转即可   但是  不是嵌套  模糊匹配不生效 无法 激活 CSS
所以 做成嵌套关系
/member/order--> 写组件 但是因为有子路由 组件中还需要放置  router-view
但其 仅仅就是一个容器  可以直接通过 render 函数  生成 router-view
这样就无需指定 组件  以及组件中 router-view
{ path: '/member/order', component: {render:()=>{h(<RouterView/>)}} },

children: [
  { path: '', component: MemberHome },           主页
  { path: ':id', component: MemberDetail },   详情页
]
形成嵌套关系   访问 /member/order/123   模糊匹配 /member/order  也可激活 CSS

*/
